<template>
	<view class="flex-col page">
		<image class="self-center image mt-27" src='../../static/image/success.png' />
		<view class="flex-col group">
			<text class="self-center font">订单提交成功</text>
			<view class="mt-22 flex-col self-stretch">
				<view class="flex-row justify-center group_2">
					<text class="font_2 text_2">单号:{{details.id}}</text>
					<u-icon name="file-text" label="复制" @click="copyNo"></u-icon>
				</view>
				<view class="flex-col section">
					<!-- 		<view style="padding: 10rpx; text-align: left;font-size: 34rpx; color: #ff0101; font-weight: bold;">
						货款缴纳方式:
					</view> -->
					<view
						style="padding: 20rpx; text-align: left; font-size: 28rpx; color: #ff0101; font-weight: bold;">
						<!-- 						<view>1 微信转账:</view> -->

						<text
							style="padding: 10rpx; text-align: left; font-size: 32rpx; color: #000; font-weight: bold;">{{details.instruction}}</text>

						<view style="padding: 20rpx; padding-top: 40rpx; text-align: center; color: #ff0101;">
							<text
								style="padding: 20rpx 0; text-align: left; font-size: 28rpx; color: #000; font-weight: bold;">付款方式:截屏分享至微信【文件传输助手】或任一微信对话框，识别收款二维码付款</text>

						</view>
					</view>
					<!-- 				<view style=" padding-left: 10px; font-size: 28rpx; color: #ff0101; font-weight: bold;">
						2 保存店铺收款二维码到相册，微信扫一扫付款
					</view> -->
					<!-- 					<view v-if="details.instructionUser.meta.paymentText"
						style="color:#000;padding: 10px; font-size: 28rpx; color: #ff0101; font-weight: bold;">
						3 银行转账:
						<view style="padding: 20rpx 0; color: #000; font-size: 28rpx;font-weight: bold"
							@click="copyText(details.instructionUser.meta.paymentText)" class="flex-row">
							{{details.instructionUser.meta.paymentText}} <u-icon name="file-text" label="复制"></u-icon>
						</view>
					</view> -->
					<image class="mt-14 image_2" :src="details.instructionUser.meta.qrCode" mode="widthFix"
						:show-menu-by-longpres="true" />
					<!-- 				<view style="text-align: left; padding: 10rpx; margin-top: 20rpx;">
						提示:长按二维码图片保存到相册后进行识别
						<button type="primary"
							style="width: 200px; line-height:unset; margin:5px auto; font-size:14px;padding: 10px;"
							@click="save(details.instructionUser.meta.qrCode)">保存到相册</button>
					</view> -->

					<!-- 					<image class="mt-14 image_2" src="/static/tmp/20250208110131.jpg" mode="widthFix" :show-menu-by-longpres="true" /> -->
				</view>
			</view>
		</view>
		<view class="flex-col items-center group_3">
			<view class="flex-col justify-start items-center text-wrapper_2">
				<text class="font_2 text_5" @click="goHome">返回首页</text>
			</view>
			<view class="flex-col justify-start items-center text-wrapper_3 mt-17">
				<text class="font_2 text_6" @click="goOrders">查看订单</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {},
		data() {
			return {
				details: {}
			};
		},
		onLoad() {
			if (uni.getStorageSync("@orders_liangpin")) {
				this.details = uni.getStorageSync("@orders_liangpin")
			}
		},
		methods: {
			save(imgUrl) {
				wx.downloadFile({
					url: imgUrl,
					success(uRes) {
						wx.saveImageToPhotosAlbum({
							filePath: uRes.tempFilePath,
							success(res) {
								uni.showToast({
									icon: 'none',
									title: '已成功保存到相册'
								})
							}
						});
					}
				})
			},
			priviewImage(img) {
				wx.previewImage({
					urls: [img]
				})
			},
			copyText(text) {
				uni.setClipboardData({
					data: text,
					complete() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			},
			copyNo() {
				uni.setClipboardData({
					data: this.details.id,
					complete() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goOrders() {
				uni.switchTab({
					url: '/pages/order/order'
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.mt-27 {
		margin-top: 47.09rpx;
	}

	.ml-9 {
		margin-left: 15.7rpx;
	}

	.mt-17 {
		margin-top: 29.65rpx;
	}

	.page {
		padding-bottom: 34.88rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.text-wrapper {
			padding: 132.56rpx 0 24.42rpx;
			background-image: url('https://ide.code.fun/api/image?token=672c262573147e0011b94bf3&name=2960d85ac9d0f7034e61b93a169b9f87.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.text {
				margin-right: 181.4rpx;
				line-height: 33.21rpx;
			}
		}

		.image {
			width: 174.42rpx;
			height: 174.42rpx;
		}

		.group {
			margin-top: 45.35rpx;
			padding-left: 41.86rpx;
			padding-right: 33.14rpx;

			.group_2 {
				padding-bottom: 31.4rpx;

				.text_2 {
					line-height: 22.24rpx;
				}

				.text_3 {
					color: #555555;
				}
			}

			.section {
				padding: 27.91rpx 27.91rpx 36.63rpx;
				background-color: #f2f2f2;
				border-radius: 8.72rpx;

				.text_4 {
					color: #555555;
					font-size: 28rpx;
					font-family: SourceHanSansCN;
					padding: 10rpx 0rpx;
				}

				.image_2 {
					margin: 0 34.88rpx;
					width: 500rpx;
					height: 500rpx;
				}
			}
		}

		.font {
			font-size: 34.88rpx;
			font-family: SourceHanSansCN;
			line-height: 32.65rpx;
			color: #000000;
		}

		.group_3 {
			margin-top: 76.74rpx;

			.text-wrapper_2 {
				padding: 20.95rpx 0;
				background-color: #f5f5f5;
				border-radius: 18.72rpx;
				width: 412.21rpx;
				border-left: solid 1.74rpx #eeeeee;
				border-right: solid 1.74rpx #eeeeee;
				border-top: solid 1.74rpx #eeeeee;
				border-bottom: solid 1.74rpx #eeeeee;

				.text_5 {
					font-size: 32rpx;

				}
			}

			.text-wrapper_3 {
				padding: 20.95rpx 0;
				background-color: #ff0101;
				border-radius: 18.72rpx;
				width: 412.21rpx;
				border-left: solid 1.74rpx #eeeeee;
				border-right: solid 1.74rpx #eeeeee;
				border-top: solid 1.74rpx #eeeeee;
				border-bottom: solid 1.74rpx #eeeeee;

				.text_6 {
					color: #ffffff;
					font-size: 32rpx;
					;
				}
			}
		}

		.font_2 {
			font-size: 28.42rpx;
			font-family: SourceHanSansCN;
			line-height: 22.41rpx;
			color: #000000;
		}
	}
</style>